<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<link href="../../css/bootstrap.css" type="text/css" media="screen" rel="stylesheet" />
	<link href="../../css/bootstrap-xadmin.css" type="text/css" media="screen" rel="stylesheet" />
	<script type="text/javascript" src="../../js/jquery.js"></script>
	<style type="text/css">
			body.dashboard{
				background-color: #FBFBFB;
				/*font-family: "-apple-system-font,Helvetica Neue,PingFang SC,Microsoft YaHei,sans-serif";*/
				font-family: 400 1em/1.8 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', STHeiti, 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif;
			}
			ul,li{
				list-style:none;
				padding: 0;
			}
			a{
				color: #606266;
				display: block;
				text-decoration:none !important;
			}
			a:hover, a:focus{
				/*color: #428bca;*/
				color: #606266;
			}
			input:hover, input:focus{
				/*color: #428bca;*/
				border: none;
			}
			hr{
				margin: 20px 0px 10px;
			}
			input{
				outline：none !important;
				padding: 0;
			}
			input:hover, input:focus{
				outline：none !important;
			}
			.padding-left05{
				margin-left: 10px;
			}
			.mian-width {
				width: 1300px;
				margin: 0 auto;
			}
			.fs12{
				font-size: 12px;
			}
			.fs14{
				font-size: 14px;
			}
			.fs16{
				font-size: 16px;
			}
			.fw700{
				font-weight:700;
			}
			.c3{
				color: #606266;
			}
			.top-search-form {
				margin-top: 14px;
			}
			.btn-login {
				border: 1px solid #fff;
				margin-right: 18px;
				padding: 5px 0 !important;
				text-align: center;
				color: #fff !important;
				width: 80px;
				font-size: 14px;
				display: inline-block;
				line-height: 1;
				white-space: nowrap;
				cursor: pointer;
				border-color: #dcdfe6;
				-webkit-appearance: none;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				outline: none;
				-webkit-transition: .1s;
				transition: .1s;
				font-weight: 500;
				-moz-user-select: none;
				-webkit-user-select: none;
				-ms-user-select: none;
				border-radius: 4px;
				margin-top: 14px;
			}
			.btn-login:hover{
				background-color: #fff !important;
				color: #525cdc !important;
			}
			.btn-register:hover{
				background-color: #757de3 !important;
				color: #fff !important;
			}
			.btn-register {
				background-color: #525cdc;
				border-color: #525cdc;
			}
			.auth-body-warp{
				display: none;
			}
			.auth-body {
				background-color: rgba(0, 0, 0, 0.8);
				position: fixed;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				z-index: 1030;
				display: flex;
				align-items: center;
			}
			.body-middle {
				width: 100%;
				margin: 0 auto;
			}
			.body-middle form{
				display: flex;
				text-align: center;
				align-items: center;
			}
			.top-img {
				width: 100%;
				text-align: center;
				margin: 0 auto;
			}
			.panel-wrapper {
				width: 100%;
			}
			.panel {
				background-color: #fff;
				width: 440px;
				max-width: 100%;
				border: 1px solid #eee;
				border-radius: 10px;
				z-index: 100;
				padding: 30px 60px;
				margin: 20px auto;
			}
			.body-content{
				width: 1300px;
				margin: 75px auto 0;
			}
			.margin-top0{
				margin-top: 0;
			}
			.li-heat{
				text-align: left;
			}
			.close-img{
				float: right;
				width: 30px;
				height: 30px;
				margin-right: -45px;
				margin-top: -10px;
			}
			.user-information{
				overflow: hidden;
				margin: 10px auto 0;
			}
			.user-information img{
				border-radius: 100%;
			}
			.user-color{
				color: #fff;
				text-align: center;
			}
			.grabble-select{
				width: 80px;
				position: absolute;
				top: 0px;
				min-height: 40px;
				left: 0px;
				background:url(../../images/cxjt.png) no-repeat scroll 95% center transparent;
			    background-size: 15px 8px;
			    padding: 0;
			}
			.head-content{
				color: #606266;
				margin: 10px auto;
			}
			.new-head-content{
				color: #606266;
				margin: 10px auto 15px;
			}
			.single-page {
				position: absolute;
				width: 300px;
				padding: 15px 15px 0 15px;
				margin: 10px 10px 10px 0;
				border: 1px solid #d4d4d4;
				background-color: #fff;
				border-radius: 5px;
			}
			.mian-img-div{
				width:100%;
				text-align: center;
				border:1px solid #ccc;
				margin: 0px auto;
				border-radius: 5px;
				-moz-box-shadow:2px 2px 15px #c1c1c1; 
				-webkit-box-shadow:2px 2px 15px #c1c1c1; 
				box-shadow:2px 2px 15px #c1c1c1;
			}
			.mian-img{
				width: 96%;
				margin: 5px auto;
			}
			img.head-logo{
				width: 30px;
				height: 30px;
				border-radius: 50%;
				margin: 0px auto;
			}
			.head-content span{
				display: inline-block;
				height: 20px;
				margin-right: 10px;
				font-size: 12px;
			}
			span.span-right{
				cursor:pointer;
				text-align: right;
			}
			.heat-img{
				height: 15px;
				margin-top: -1px;
			}
			.clear{
				clear:both
			} 
			
			.collect-button{
				text-align: right;
			}
			.a-button{
				display: inline-block;
				width: 65px;
				height: 25px;
				border: 1px solid #d8d8d8;
				text-align: center;
				line-height: 25px;
				font-size: 12px;
				color: #606266;
				border-radius: 5px;
				margin-right: 10px;
			}
		</style>
</head>
	<body class="dashboard">
		<div id="top-nav" class="navbar navbar-xs navbar-inverse navbar-fixed-top">
			<div class="mian-width">
				<div class="navbar-header">
					<a class="navbar-brand" href="index.html"><img src="../../images/icon.png" style="margin-right: 5px" /></a>
				</div>
				<div class="navbar-collapse collapse">
					<ul class="nav navbar-nav pull-right" >
						<li class="dropdown g-theme">
							<a class="btn-login" id="btnLogin">
								登录
							</a>

						</li>
						<li class="dropdown g-theme">
							<a class="btn-login btn-register" id="btnRegister">
								注册
							</a>

						</li>

					</ul>
					<ul class="nav navbar-nav pull-right" style="display: none;">
						<li class="dropdown user-information">
							<img src="../../images/icon.png"/>
							<div class="user-color">名称</div>
						</li>
					</ul>

				</div>
			</div>
		</div>
		<style type="text/css">
			.body-content-left{
				width: 20%;
				float: left;
				border: 1px solid #d4d4d4;
				height: 600px;
				border-radius: 5px;
				background-color: #fff;
			}
			.body-content-right{
				width: 70%;
				float: right;
			}
			.bookmark-tltie{
				height: 60px;
				line-height: 60px;
				text-align: center;
				border-bottom: 1px solid #D4D4D4;
				color: #070101;
			}
			.bookmark-tltie span{
				margin-left: 10px;
			}
			.bookmark-list{
				width: 90%;
				margin: 25px auto 0;
				background-color: #ededed;
			}
			.bookmark-list li{
				height: 35px;
				line-height: 35px;
				text-align: center;
			}
			.collect-tltie{
				width: 100%;
				border: 1px solid #D4D4D4;
				border-radius: 5px;
				height: 70px;
				line-height: 70px;
				padding-left: 30px;
				background-color: #fff;
			}
			.content-middle-ul{
				width: 110%;
				margin-top: 20px;
			}
		</style>
		<!--中间-->
		<div class="body-content">
			<div class="body-content-left">
				<div class="bookmark-tltie">书签列表<span>(1)</span></div>
				<ul class="bookmark-list">
					<li>最爱</li>
				</ul>
			</div>
			<div class="body-content-right">
				<div class="collect-tltie">
					收藏标题
				</div>
				
				<div class="content-middle-ul" id="list-ul">
					
				</div>
			</div>
		</div>
		<script type="text/javascript" src="./jquery.freetile.min.js"></script>
<script type="text/javascript">
	$.ajax({
            url: 'jsondata.json',
            type: 'get',
            data: {
                page: 1,
                pageSize: 10
            },
            success: function (data) {
            	for (i = 0; i < data.json_data.length; i++) {

		          var text = '<div class="single-page">\
		          		<div class="collect-button">\
							<span class="span-right" id="spanRight">\
								<div class="a-button"><a >详&nbsp情</a></div>\
								<div class="a-button"><a >更&nbsp多</a></div>\
								<img src="../../images/x1.png" class="heat-img" id="heatImg" style="width: 25px;height: 25px;"/ >\
							</span>\
						</div>\
						<hr />\
			            <div class="li-titel">\
			              <img src='+ data.json_data[i].logo +' class="head-logo" / >\
			              <span class="fw700 c3 fs16 padding-left05">' + data.json_data[i].app_from + '</span>\
			            </div>\
			            <a href="' + data.json_data[i].url + '">\
			            	<div class="head-content fs14">' + data.json_data[i].title + '</div>\
				            <div class="mian-img-div">\
				            	<img src="' + data.json_data[i].img + '" class="mian-img"/>\
				            </div>\
			            </a>\
			            <div class="li-heat head-content">\
			            	<span><img src="../../images/1.png" class="heat-img"/ > ' + data.json_data[i].discover_count + '</span>\
			            	<span><img src="../../images/2.png" class="heat-img"/ > ' + data.json_data[i].discover_count + '</span>\
			            	<span><img src="../../images/3.png" class="heat-img"/ > ' + data.json_data[i].discover_count + '</span>\
			            </div>\
					</div>';
					$("#list-ul").append(text);
            	}
            	
                console.log(data)
          $("#list-ul").freetile({animate:true,elementDelay:0}); 
            }
        })
</script>
		
		<div class="auth-body-warp">
			<div class="auth-body">
				<div class="body-middle">
					<form action="" method="post" id="login-form">
						<div class="panel panel-default panel-single" id="panel-login">
							<img src="../../images/colse2.png" class="close-img" id="login-close"/>
							<input type='hidden' name='csrfmiddlewaretoken' value='agySyUF4evwylcfFpPLW10mZq9mxcXSHTFvhDWC8MFX4Jz5PstFnaspo1nskGfl0' />
	
							<div class="panel-heading">
	
								<p style="text-align: center;margin-top: 15px">
									<img src="../../images/logo.png" />
								</p>
	
							</div>
							<div class="panel-body">
	
								<div id="div_id_username" class="row">
									<div class="controls clearfix">
										<div class="input-group input-group-lg">
											<span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
											<input class="form-control input-lg" id="id_username" maxlength="254" name="username" type="text" placeholder="用户名">
										</div>
	
									</div>
								</div>
	
								<div id="div_id_password" class="row">
									<div class="controls clearfix">
										<div class="input-group input-group-lg">
											<span class="input-group-addon"><i class="fa fa-lock fa-fw"></i></span>
											<input class="form-control input-lg" id="id_password" name="password" type="password" placeholder="密码">
											<input type="text" value="获取验证码" style="position: absolute;height: 43px;padding: 10px 0px;width: 90px;font-size: 14px;text-align: center;left: 198px;top:1px;cursor:pointer;" readonly="" id="gainCode"/>
										</div>
	
									</div>
								</div>
	
								<input type="hidden" name="this_is_the_login_form" value="1" />
								<input type="hidden" name="next" value="/admin/" />
	
								<button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
	
								<div class="text-info" style="margin-top:15px;">
									<a href="javasrcipt:;"><i class="fa fa-question-sign"></i> 忘记了您的密码或用户名？</a>
								</div>
							</div>
	
						</div>
					</form>
				</div>
			</div>
		</div>
		
		
		
		<div class="auth-body-warp-register" style="display: none;">
			<div class="auth-body">
				<div class="body-middle">
					<form action="" method="post" >
						<div class="panel panel-default panel-single" id="panel-login">
							<img src="../../images/colse2.png" class="close-img" id="login-close-register"/>
							<input type='hidden' name='csrfmiddlewaretoken' value='agySyUF4evwylcfFpPLW10mZq9mxcXSHTFvhDWC8MFX4Jz5PstFnaspo1nskGfl0' />
	
							<div class="panel-heading">
	
								<p style="text-align: center;margin-top: 15px">
									<img src="../../images/logo.png" />
								</p>
	
							</div>
							<div class="panel-body">
	
								<div id="div_id_username" class="row">
									<div class="controls clearfix">
										<div class="input-group input-group-lg">
											<span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
											<input class="form-control input-lg" maxlength="254" name="username" type="text" placeholder="企业名称">
										</div>
	
									</div>
								</div>
								<div  class="row">
									<div class="controls clearfix">
										<div class="input-group input-group-lg">
											<span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
											<input class="form-control input-lg" maxlength="254" name="username" type="text" placeholder="负责人">
										</div>
	
									</div>
								</div>
								<div  class="row">
									<div class="controls clearfix">
										<div class="input-group input-group-lg">
											<span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
											<input class="form-control input-lg" maxlength="254" name="username" type="text" placeholder="手机号">
										</div>
	
									</div>
								</div>
								
								
	
								<div id="div_id_password" class="row">
									<div class="controls clearfix">
										<div class="input-group input-group-lg">
											<span class="input-group-addon"><i class="fa fa-lock fa-fw"></i></span>
											<input class="form-control input-lg" name="password" type="password" placeholder="密码">
											<input type="text" value="获取验证码" style="position: absolute;height: 43px;padding: 10px 0px;width: 90px;font-size: 14px;text-align: center;left: 198px;top:1px;cursor:pointer;" readonly="" />
										</div>
	
									</div>
								</div>
	
								<input type="hidden" name="this_is_the_login_form" value="1" />
								<input type="hidden" name="next" value="/admin/" />
	
								<button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
	
								<div class="text-info" style="margin-top:15px;">
									<a href="javasrcipt:;"><i class="fa fa-question-sign"></i> 忘记了您的密码或用户名？</a>
								</div>
							</div>
	
						</div>
					</form>
				</div>
			</div>
		</div>
	</body>
</html>